<template>
    <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        v-model:page-size="pageSize"
        :page-count="total"
        :total="total"
        @current-change="handleCurrentChange"
       class="pagination-tem"
    />
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator';
import {ElPagination } from 'element-plus';

@Component
export default class PagePagination extends Vue {
    // 总页数 对应 page-count
    @Prop({default:5}) public pageSize!:number;
    // 当前页数 current-page
    @Prop({default:1}) public page!:number;
    // 总条数
    @Prop({default:100}) public total!:number

    @Emit("handleCurrentChangeEmit")
    public handleCurrentChange(val: number){
       return val;
    }
}
</script>

<style lang="less">
.pagination-tem .el-input__wrapper {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
}

.pagination-tem li {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
}

.pagination-tem .el-input__inner {
    width: 48px;
    height: 48px !important;
    border-radius: 12px !important;
}

.pagination-tem .btn-prev,.btn-next {
    width: 48px;
    height: 48px !important;
    border-radius: 12px !important;
}
</style>
